<template>
  <div>
    <!-- 数据统计栏 -->
    <ul class="home-app">
      <li>
        <img src="../../assets/imgs/订单.png" alt="" />
        <p>
          <span>总订单</span>
          <span>{{ totalOrder | filerData }}</span>
        </p>
      </li>

      <li class="feaImg">
          <img src="../../assets/imgs/硬币.png" alt="" />
        <p>
          <span>总销售额</span>
          <span>{{ totalAmount | filerData }}</span>
        </p>
      </li>

      <li>
          <img src="../../assets/imgs/订单2.png" alt="" />
        <p>
          <span>今日订单</span>
          <span>{{ todayOrder | filerData }}</span>
        </p>
      </li>

      <li class="feaImg">
          <img src="../../assets/imgs/硬币2.png" alt="" />
        <p>
          <span>今日销售额</span>
          <span>{{ totayAmount | filerData }}</span>
        </p>
      </li>
    </ul>

    <!-- echarts工具栏 -->
    <div id="main" style="width: 100%; height: 600px"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import { totalData } from "../../api/order";
export default {
  data() {
    return {
      homeListEcharts: "",
      totalOrder: "",
      totalAmount: "",
      todayOrder: "",
      totayAmount: "",
    };
  },
  async mounted() {
    //发送ajax得到数据
    let res = await totalData();
    console.log(res);

    let {
      xData,
      orderData,
      amountData,
      totalOrder,
      totalAmount,
      todayOrder,
      totayAmount,
    } = res;
    this.myChart(xData, orderData, amountData);
    this.totalOrder = totalOrder;
    this.totalAmount =totalAmount;
    this.todayOrder = todayOrder;
    this.totayAmount = totayAmount;

    //添加一个窗口改变事件
    window.addEventListener("resize",this.resizeHandle)
  },

  //回收组件
  beforeDestroy(){
    window.removeEventListener("resize",this.resizeHandle)
    
  },
  methods: {

      //我们要做echarts图表的适配
      resizeHandle(){
          this.homeListEcharts.resize()  //这个是echarts的一个内置的方法

      },

    // 基于准备好的dom，初始化echarts实例
    myChart(xData, orderData, amountData) {
      this.homeListEcharts = echarts.init(document.querySelector("#main"));
      let Option = {
        title: {
          text: "数据统计",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["订单数量", "总销售额"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
            magicType: {
              type: ["line", "bar", "stack"],
            },
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "订单数量",
            type: "line",
            stack: "Total",
            data: orderData,
          },
          {
            name: "销售额",
            type: "line",
            stack: "Total",
            data: amountData,
          },
        ],
      };
      this.homeListEcharts.setOption(Option);
    },
  },

  filters: {
    filerData(num) {
      return num.toString().replace(/\d+/, function (n) {
        return n.replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
      });
    },
  },
};
</script>

<style lang="less" scoped>
.home-app {
  width: 100%;
  display: flex;
  justify-content: space-between;
    margin-bottom: 40px;
  li {
    width: 20%;
    height: 80px;
    background-color: white;
    display: flex;
    justify-content: space-around;
    
    img {
      width: 80px;
      height: 70px;
      margin-top: 10px;
    }
    p {
      display: flex;
      flex-direction: column;
       
      span{
          line-height: 30px;
      }
      
    }
  }
  .feaImg{
      img{
          width:65px ;
          height: 65px;
         
      }
  }
}
#main {
  background-color: white;
  box-sizing: border-box;
  padding: 30px;
}
</style>